<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        .bigBox {
            height: 500px;
            width: 500px;
            border: 5px solid salmon;
            position: relative;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
        }
        .smallBox {
            height: 50px;
            width: 50px;
            background-color: rgb(14, 237, 237);
            position: absolute;
            left: 0px;
            top: 0px;
        }
        .dou {
            height: 20px;
            width: 20px;
            background-color: gold;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <div class="smallBox"></div>
    </div>
    <button>开始</button>
    <button>暂停</button>

    <script>
        const bigBox = document.querySelector(".bigBox")
        const smallBox = document.querySelector(".smallBox")
        const btn = document.getElementsByTagName("button")

        let XS = bigBox.clientWidth - smallBox.clientWidth;  // 横向路程
        let YS = bigBox.clientHeight - smallBox.clientHeight;  // 纵向路程
        
        let begin;
        
        btn[0].onclick = function () {
            document.onkeydown = function (e) {
                clearInterval(begin);
                begin = setInterval(function () {
                    let x = smallBox.offsetLeft;  //小方块距离大方块的纵向距离
                    let y = smallBox.offsetTop;  //小方块距离大方块的纵向距离
                    // console.log(x, y)
                        e = e || window.event
                        let keyCode = e.keyCode || e.which

                        if (x < XS && keyCode == 68) {
                            smallBox.style.left = `${x + 10}px`
                        }
                        else if (y > 0 && y <= YS && keyCode == 87) {
                            smallBox.style.top = `${y - 10}px`
                        }
                        else if (x > 0 && x <= XS && keyCode == 65) {
                            smallBox.style.left = `${x - 10}px`
                        }
                        else if (y < YS && keyCode == 83) {
                            smallBox.style.top = `${y + 10}px`
                        } else {
                            alert("撞墙了")
                            clearInterval(begin)
                            smallBox.style.left = '0px'
                            smallBox.style.top = '0px'
                        }
                }, 100)
            }
            // dou = setInterval(function () {
            //     douX = Math.floor(Math.random() * 400) + 50;
            //     douY = Math.floor(Math.random() * 400) + 50;
            //     let d = document.createElement("div")
            //     d.setAttribute("class", "dou")
            //     d.style.top = `${douY}px`
            //     d.style.left = `${douX}px`
            //     bigBox.appendChild(d)
                
            // },5000)
        }
        
        btn[1].onclick = function () {
            clearInterval(begin)
            clearInterval(dou)
            console.log("暂停")
        }
        
        console.log("XS:",XS)
        console.log("YS:",YS)
    </script>
</body>
</html>